<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <meta name="keywords" content="jquery,ui,easy,easyui,web">  
    <meta name="description" content="easyui help you build your web page easily!">  
    <title>jQuery EasyUI CRUD Demo</title>  
    <link rel="stylesheet" type="text/css" href="/pfw/jquery/easyui/themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="/pfw/jquery/easyui/themes/icon.css">  
    <link rel="stylesheet" type="text/css" href="/pfw/jquery/easyui/themes/demo/demo.css">  
    <script type="text/javascript" src="/pfw/jquery/jquery-1.9.1.min.js"></script>  
    <script type="text/javascript" src="/pfw/jquery/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="/pfw/jquery/jquery.form.js"></script>  
    <script type="text/javascript" src="/pfw/jquery/easyui/jquery.easyui.min.js"></script>  
    <script type="text/javascript" src="/pfw/jquery/easyui/common/datagrid.js"></script>  
    <script type="text/javascript" src="/pfw/jquery/easyui/common/utils.js"></script>    
    <script type="text/javascript" src="/sysadmin/systemDic/extlistdic.do?isvar=1"></script>
	<script type="text/javascript" src="/js/dic.js"></script>
	<script type="text/javascript" src="/sysadmin/systemConstantDic/extlist.do?isvar=1"></script>
        <script type="text/javascript" src="/js/constantDic.js"></script>	
</head>  

 <script type="text/javascript">  
        var url;  
        function newUser(){  
            $('#dlg').dialog('open').dialog('setTitle','New User');  
            $('#fm').form('clear');  
            url = 'save_user.php';  
        }  
        function formatPrice(val,row){  
            //console.log(val);
            //return row.account;  
            return val;
           
        } 
        function getConstantDic(val,row,index){  
            console.log(val);
            return __getConstantCategroyCodeValue('UserStatus', val);
            //return row.account;  
            
            //return val;
           
        }
        function editUser(){  
        	 $('#combobox1').combobox('setValues', [2302,2305]);
            var row = $('#dg').datagrid('getSelected'); 
            console.log(row); 
            if (row){  
                $('#dlg').dialog('open').dialog('setTitle','Edit User');  
                $('#fm').form('load',row);  
                url = 'update_user.php?id='+row.id;  
            }  
        }  
        function saveUser(){  
            $('#fm').form('submit',{  
                url: url,  
                onSubmit: function(){  
                    return $(this).form('validate');  
                },  
                success: function(result){  
                    var result = eval('('+result+')');  
                    if (result.errorMsg){  
                        $.messager.show({  
                            title: 'Error',  
                            msg: result.errorMsg  
                        });  
                    } else {  
                        $('#dlg').dialog('close');      // close the dialog  
                        $('#dg').datagrid('reload');    // reload the user data  
                    }  
                }  
            });  
        }  
        function destroyUser(){  
            var row = $('#dg').datagrid('getSelected');  
            if (row){  
                $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){  
                    if (r){  
                        $.post('destroy_user.php',{id:row.id},function(result){  
                            if (result.success){  
                                $('#dg').datagrid('reload');    // reload the user data  
                            } else {  
                                $.messager.show({   // show error message  
                                    title: 'Error',  
                                    msg: result.errorMsg  
                                });  
                            }  
                        },'json');  
                    }  
                });  
            }  
        }  


         
    </script>  

<body>  
    <h2>Basic CRUD Application</h2>  
    <div class="demo-info" style="margin-bottom:10px">  
        <div class="demo-tip icon-tip">&nbsp;</div>  
        <div>Click the buttons on datagrid toolbar to do crud actions.</div>  
    </div>  
      
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"  
            url="/auth/systemUser/jsonlist.do"  
            toolbar="#toolbar" pagination="true"  
            rownumbers="true" fitColumns="true" singleSelect="false">  
        <thead>  
            <tr>  
                <th data-options="field:'ck',checkbox:true"></th>
                <th field="name" width="50" formatter="formatPrice">name</th>  
                <th field="account" width="50">account</th>  
                <th field="phone" width="50">Phone</th>  
                <th field="email" width="50">Email</th>  
                <th field="status" width="50">Status</th>  

            </tr>  
        </thead>  
    </table>  
    <div id="toolbar">  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>  
    </div>  
    <!---新增form(开始) --->  
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"  
            closed="true" buttons="#dlg-buttons">  
        <div class="ftitle">User Information</div>  
        <form id="fm" method="post" novalidate>  
            <div class="fitem">  
                <label>First Name:</label>  
                <input name="firstname" class="easyui-validatebox" required="true">  
            </div>  
            <div class="fitem">  
                <label>Last Name:</label>  
                <input name="lastname" class="easyui-validatebox" required="true">  
            </div>  
            <div class="fitem">  
                <label>Phone:</label>  
                <input name="phone">  
            </div>  
            <div class="fitem">  
                <label>Email:</label>  
                <input name="email" class="easyui-validatebox" validType="email">  
            </div>  
        </form>  
    </div>  
    <!---新增form(结束) --->  
    <div id="dlg-buttons">  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>  
    </div>  
   <div>
   	<select id="state" class="easyui-combobox" name="state" style="width:200px;">  
        <option value="AL">Alabama</option>  
    </select>    
   </div>
   <div>
   	 <input class="easyui-combobox"   
            name="language"  
            style="width:200px;"
            data-options="  
                    url:'/sysadmin/systemDic/extlistdic.do?category=COMPANY_NATURE',  
                    valueField:'id',  
                    textField:'codeNameCn',  
                    multiple:false,  
                    panelHeight:'auto'  
            ">    
   </div>   
   <div>
   	 <input id="combobox1" class="easyui-combobox"   
            name="language"  
            style="width:200px;"            
            data-options="  
                    url:'/sysadmin/systemDic/extlistdic.do?category=COMPANY_NATURE',  
                    //data:__getCategory('COMPANY_NATURE'),
                    valueField:'id',  
                    textField:'codeNameCn',  
                    multiple:true,  
                    panelHeight:'auto',
                    mode:'remote'  
            ">    
   </div>
   
      
     <script type="text/javascript">  
     	  var aaa=$('#dg');


 	      $('#dg').datagrid({
        	 onClickRow: function(rowIndex, rowData){
        	 	//console.log(rowData);
        	 	alert('onClickRow:'+rowData.name);
           
	          }
        });

        $('#dg').datagrid({
        	 columns:[[
        	 	{field:'status',title:'status', width:80,
        	 		formatter: function(value,row,index){
        	 			return __getConstantCategroyCodeValue('UserStatus', value);
        	 		}
        	 	}
        	 ]]
        });

       //$('#combobox1').combobox('setValues', ['2302','2305']);
       $('#combobox1').combobox({
	          onSelect: function(record){
	          	//console.log(record.id);
	          	alert('onSelect:'+record.id+"--"+record.codeNameCn);
	          	//alert($('#combobox1').val);
	          	alert($('#combobox1').combobox('getValues'));
	          }
	
       });

     </script>
</body>  
</html>  